<template>
  <div>
    <div class="top">
    <el-button type="primary" @click="show('新增资源信息',null,false)" icon="el-icon-plus">新增</el-button>
       </div>
    <div style="margin-top: 10px;">
      <template>
        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            height="450"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
              prop="resourcename"
              label="资源名称"
              sortable
              width="180">
          </el-table-column>
          <el-table-column
              prop="resourceurl"
              label="url"
              sortable
              width="180">
          </el-table-column>
          <el-table-column
              prop="component"
              label="组件名称">
          </el-table-column>
          <el-table-column

              label="图标">
            <template slot-scope="scope">
              <i :class="scope.row.icon" class="fa-2x"></i>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="250">
            <template slot-scope="scope">
              <el-button class="el-icon-search" @click="show('查看资源信息',scope.row,true)" type="primary" size="small">查看</el-button>
              <el-button class="el-icon-edit" @click="show('编辑资源信息',scope.row,false)" type="primary"  size="small">编辑</el-button>
              <el-button class="el-icon-delete" @click="deleteById(scope.row)"  type="warning" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

    </div>
    <div id="roleInfo">
      <el-dialog :title="title" :visible.sync="dialogFormVisible">

        <el-form :model="form" v-loading="loading" :readOnly="readOnly">
          <el-form-item label="资源名称" label-width="120px">
            <el-input v-model="form.resourcename" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="资源url" label-width="120px">
            <el-input v-model="form.resourceurl" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="icon" label-width="120px">
            <el-input v-model="form.icon" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="组件名称" label-width="120px">
            <el-input v-model="form.component" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上级资源" label-width="120px">
            <el-cascader
                :options="options"
                :props="{ checkStrictly: true }"
                :value="form.pid"
                clearable></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "Resource",
  data(){
    return {
      data:{
        param:{
          deptname:''
        },
        pageNumber:1,
        pageSize:20,
        total:0
      },
      form:{
        deptname:'',
        id:0,
        deptcode:'',
        status:'1'
      },
      tableData: [],
      dialogFormVisible:false,
      loading:true,
      title:'',
      resources:[],
      options:[],
      readOnly:false,
      multipleSelection: []
    }
  },
  mounted() {
   this.initData();
  },
  methods: {


    initData(){

      this.postRequest('/sys/resource/query',this.data).then(resp=>{
        if(resp.success){
          this.tableData = resp.result;

        }
        this.loading = false

      })
    },
    show(title,row,readOnly){
      this.title = title
      this.readOnly = readOnly
      this.dialogFormVisible=true
      this.options = this.fmData(this.tableData);
      if(row!=null){
        this.getRequest('/sys/resource/info/'+row.id).then(resp=>{
          this.form = resp.result;
          this.form.status = resp.result.status+''
          this.loading = false;
        })
      }

    },
    handleSelectionChange(val){

      this.multipleSelection = val

    },
    deleteById(row){
      this.$confirm('此操作将永久删除该资源, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.deleteRequest('/sys/resource/deletes?ids='+row.id).then(resp=>{
          if(resp.success){

            this.initData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    close(){
      this.dialogFormVisible = false;
      this.$refs.form1.resetFields()
    },
    save(){
      this.postRequest('/sys/resource/save',this.form).then(resp=>{
        if(resp.success){
          this.initData();
          this.close();

        }
      })
    },
    fmData(data){
      let formaterArray=[];

      data.forEach(item=>{
        let{
          id,
          resourcename,
          children
        }=item;
        if(children && children instanceof Array){
          // 递归
          children = this.fmData(children)
        }
        let mftdata ={
          value:id,
          label:resourcename,
          children:children
        }
        formaterArray.push(mftdata);
      })
      return formaterArray;
    }


  }
}
</script>

<style scoped>
.top{
  display: flex;
}
.deptame{
  width: 200px;
  margin-right: 10px;
}
</style>